<!-- 静态数据演示版本 适合任何后端 -->
<template>
	<view class="app">
		<button @click="openSkuPopup()">打开SKU组件</button>

		<vk-data-goods-sku-popup
			ref="skuPopup"
			v-model="skuKey"
			border-radius="20"
			:localdata="goodsInfo"
			:mode="skuMode"
			:selected-init="true"
			@open="onOpenSkuPopup"
			@close="onCloseSkuPopup"
			@cart="addCart"
			@buy="buyNow"
		></vk-data-goods-sku-popup>
	</view>
</template>

<script>
var that; // 当前页面对象
export default {
	data() {
		return {
			// 是否打开SKU弹窗
			skuKey: false,
			// SKU弹窗模式
			skuMode: 1,
			// 后端返回的商品信息
			goodsInfo: {}
		};
	},
	// 监听 - 页面每次【加载时】执行(如：前进)
	onLoad(options) {
		that = this;
		that.init(options);
	},
	methods: {
		// 初始化
		init(options = {}) {},
		// 获取商品信息，并打开sku弹窗
		openSkuPopup() {
			/**
			 * 获取商品信息
			 * 这里可以看到每次打开SKU都会去重新请求商品信息,为的是每次打开SKU组件可以实时看到剩余库存
			 */
			// 此处写接口请求，并将返回的数据进行处理成goodsInfo的数据格式，
			// goodsInfo是后端返回的数据（此处的数据结构和属性名必须与下方完全一致）
			that.goodsInfo = {
				_id: "001",
				name: "iphone11",
				goods_thumb: "https://img14.360buyimg.com/n0/jfs/t1/59022/28/10293/141808/5d78088fEf6e7862d/68836f52ffaaad96.jpg",
				sku_list: [
					{
						_id: "001",
						goods_id: "001",
						goods_name: "iphone11",
						image: "https://img14.360buyimg.com/n0/jfs/t1/79668/22/9987/159271/5d780915Ebf9bf3f4/6a1b2703a9ed8737.jpg",
						price: 19800,
						sku_name_arr: ["红色", "128G", "公开版"],
						stock: 1000
					},
					{
						_id: "002",
						goods_id: "001",
						goods_name: "iphone11",
						image: "https://img14.360buyimg.com/n0/jfs/t1/52252/35/10516/124064/5d7808e0E46202391/7100f3733a1c1f00.jpg",
						price: 9800,
						sku_name_arr: ["白色", "256G", "公开版"],
						stock: 100
					},
					{
						_id: "003",
						goods_id: "001",
						goods_name: "iphone11",
						image: "https://img14.360buyimg.com/n0/jfs/t1/79668/22/9987/159271/5d780915Ebf9bf3f4/6a1b2703a9ed8737.jpg",
						price: 19800,
						sku_name_arr: ["红色", "256G", "公开版"],
						stock: 1
					}
				],
				spec_list: [
					{
						list: [
							{
								name: "红色"
							},
							{
								name: "黑色"
							},
							{
								name: "白色"
							}
						],
						name: "颜色"
					},
					{
						list: [
							{
								name: "128G"
							},
							{
								name: "256G"
							}
						],
						name: "内存"
					},
					{
						list: [
							{
								name: "公开版"
							},
							{
								name: "非公开版"
							}
						],
						name: "版本"
					}
				]
			};
			that.skuKey = true;
		},
		// sku组件 开始-----------------------------------------------------------
		onOpenSkuPopup() {
			console.log("监听 - 打开sku组件");

			// 下面的代码作用是当弹窗打开时，自动选中 SKU 红色/128G/公开版，数量为1件

			// that.$refs.skuPopup.selectSku({
			// 	sku:["红色","128G","公开版"],
			// 	num:1
			// });
		},
		onCloseSkuPopup() {
			console.log("监听 - 关闭sku组件");
		},
		// 加入购物车前的判断
		addCartFn(obj) {
			let { selectShop } = obj;
			// 模拟添加到购物车,请替换成你自己的添加到购物车逻辑
			let res = {};
			let name = selectShop.goods_name;
			if (selectShop.sku_name != "默认") {
				name += "-" + selectShop.sku_name_arr;
			}
			res.msg = `${name} * ${selectShop.buy_num} 已添加到购物车`;
			if (typeof obj.success == "function") obj.success(res);
		},
		// 加入购物车按钮
		addCart(selectShop) {
			console.log("监听 - 加入购物车", selectShop);
			that.addCartFn({
				selectShop: selectShop,
				success: function(res) {
					// 实际业务时,请替换自己的加入购物车逻辑
					that.toast(res.msg);
					setTimeout(function() {
						that.skuKey = false;
					}, 300);
				}
			});
		},
		// 立即购买
		buyNow(selectShop) {
			console.log("监听 - 立即购买", selectShop);
			that.addCartFn({
				selectShop: selectShop,
				success: function(res) {
					// 实际业务时,请替换自己的立即购买逻辑
					that.toast("立即购买");
				}
			});
		},
		toast(msg) {
			uni.showToast({
				title: msg,
				icon: "none"
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.app {
	padding: 30rpx;
	font-size: 28rpx;
}
</style>
